<template>
  <div>
    phone
    <Carousel v-model="value1" loop autoplay>
      <CarouselItem v-for="item in banner1" :key="item.id">
        <img :src="item.image" />
      </CarouselItem>
    </Carousel>
    <FilterMenu @on-filter="filter" />
    <div style="display:flex;padding: 0 20px;flex-wrap:wrap;">
      <Product v-for="(item, index) in phoneList" :itemData="item" :key="index" />
    </div>
    <div v-if="phoneList.length === 0">暂无数据</div>
    <Page :total="30" @on-change="onChange"></Page>
    <div style="font-size:60px">{{count}}</div>
    <Button @click="onClick">增加</Button>
  </div>
</template>


<script>
import service from "@/service";
import Product from "@/components/Product";
import FilterMenu from "@/components/FilterMenu";
import { mapState, mapActions } from "vuex";
export default {
  name: "phone",
  components: {
    Product,
    FilterMenu
  },
  data () {
    return {
      banner: [],
      src: "",
      phoneList: []
    }
  },
    computed: {
      ...mapState({
        count:(state)=>{
          return state.home.count
        },
        banner1:(state)=>{
          return state.home.banner
        }
      })
    },
  created() {
    service.get("/v1/home/banner").then(res => {
      this.banner = res;
    });
    service.get("/v1/home/phoneList").then(res => {
      console.log(res);
      this.phoneList = res;
    })
    this.getBanner()
  },
  methods: {
    ...mapActions(['increase','getBanner']),
    onClick(){
      this.increase()
    },
    onChange(page) {
      service.get("/v1/home/phoneList?page=" + page).then(res => {
        console.log(page);
        this.phoneList = res;
      });
    },
    filter(brand, rom, os) {
      console.log("=== my event", brand, rom, os);
      // service.get('/v1/home/phoneList?brand=' + brand  + '&rom=' + rom +'&os=' + os)
      service
        .get(`/v1/home/phoneList?brand=${brand}&rom=${rom}&os=${os}`)
        .then(res => {
          this.phoneList = res;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.demo-carousel {
  height: 300px;
}
</style>